$control-list: (text-color: getCssVar(color-text-0),
  load-more-color: getCssVar(color-text-2),
  hover-bg-color: getCssVar(color, fill, 1),
  active-bg-color: getCssVar(color, fill, 2),
  font-weight:getCssVar(font-weight, regular),
  padding: getCssVar(spacing, tight) getCssVar(spacing, base, tight),
);

@include b(control-list-item) {
  @include set-component-css-var(control-list, $control-list);

  min-height: getCssVar(control-list, item-height);
  padding: getCssVar(control-list, padding);
  font-weight: getCssVar(control-list, font-weight);
  color: getCssVar(control-list, text-color);
  cursor: pointer;

  &:hover {
    background-color: getCssVar(control-list, hover-bg-color);
  }

  @include when(active) {
    background-color: getCssVar(control-list, active-bg-color);
  }
}

@include b(control-list) {
  @include set-component-css-var(control-list, $control-list);
  @include flex(column, flex-start, stretch);

  height: 100%;

  // 加载更多样式
  @include e(load-more) {
    color: getCssVar(control-list, load-more-color);
    text-align: center;
    cursor: pointer;
  }

  @include b(control-list-content) {
    flex-grow: 1;
  }
}

@include b(control-list-scroll) {
  height: 100%;
  overflow: auto;
}